<template>
  <!--<div class="checkTags">-->
  <!--  <div>营业收入</div>-->
  <!--  <div>营业销量</div>-->
  <!--</div>-->
  <div class="revenue">
    <div class="revenue-left">
      <p>
        <span>油品日销售单数:</span>
        <span class="amount">{{ state.油品订单数量 || 0 }}</span>
        <span>单</span>
      </p>
      <p>
        <span>油品日销售量:</span>
        <span class="amount">{{ state.油品本日销量 || 0 }}</span>
        <span>升</span>
      </p>
      <p>
        <span>油品日油机金额:</span>
        <span class="amount">{{ state.油品本日销售额 || 0 }}</span>
        <span>万元</span>
      </p>
      <p>
        <span>油品日优惠金额:</span>
        <span class="amount">{{ state.油品本日优惠额 || 0 }}</span>
        <span>万元</span>
      </p>
      <p>
        <span>地磅日收入:</span>
        <span class="amount">{{state.地磅收入}}</span>
        <span>元</span>
      </p>
      <!--      <p>-->
      <!--        <span>油品日收入金额:</span>-->
      <!--        <span class="amount">{{ state.本日销售额 || 0 }}</span>-->
      <!--        <span>万元</span>-->
      <!--      </p>-->
<!--      <p>-->
<!--        <span>礼包券收入:</span>-->
<!--        <span class="amount">{{state.礼包券收入}}</span>-->
<!--        <span>元</span>-->
<!--      </p>-->
    </div>
    <div class="revenue-center">
      <p style="margin: 0;">
        <span style="color:rgb(255, 193, 37);font-size: 1.5rem ">{{ state.油品本日实收金额 || 0 }}</span>
        <span>万元</span>
      </p>
      <p style="margin: 0;">
        <span style="font-size: 0.8rem">油品日收入金额</span>
      </p>
      <p>
        <span class="amount">{{ state.日总收入 }}</span>
        <span>万元</span>
      </p>
      <p>
        <span>日总收入</span>
      </p>
      <!--        <p>-->
      <!--          <span class="amount">{{ state.便利店 }}</span>-->
      <!--          <span>元</span>-->
      <!--        </p>-->
      <!--        <p>-->
      <!--          <span>便利店日销售额</span>-->
      <!--        </p>-->
      <!--        <p>-->
      <!--          <span class="amount">{{ state.本日销售额 || 0 }}</span>-->
      <!--          <span>万元</span>-->
      <!--        </p>-->
      <!--        <p>-->
      <!--          <span>油品日销售额</span>-->
      <!--        </p>-->

    </div>
    <div class="revenue-right">
      <!--      <p>-->
      <!--        <span>人均消费:</span>-->
      <!--        <span class="amount">{{ state.客单价 || 0 }}</span>-->
      <!--        <span>元</span>-->
      <!--      </p>-->
      <p>
        <span>油品年销售量:</span>
        <span class="amount">{{ state.油品年度销量 || 0 }}</span>
        <span>吨</span>
      </p>
      <p>
        <span>油品年油机金额:</span>
        <span class="amount">{{ state.油品年度销售额 || 0 }}</span>
        <span>万元</span>
      </p>
      <p>
        <span>商品均价:</span>
        <span class="amount">{{ state.便利店订单均价 || 0 }}</span>
        <span>元</span>
      </p>

      <p>
        <span>便利店日销售单数:</span>
        <span class="amount">{{ state.便利店单数 || 0 }}</span>
        <span>单</span>
      </p>
      <p>
        <span>便利店日收入:</span>
        <span class="amount">{{ state.便利店收入 || 0 }}</span>
        <span>元</span>
      </p>
      <!--      <p>-->
      <!--        <span>地磅收入:</span>-->
      <!--        <span class="amount">{{ state.便利店 || 0 }}</span>-->
      <!--        <span>元</span>-->
      <!--      </p>-->
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive} from 'vue';
import {getOilsSummaryData} from '@/api/dataScreen';
import dayjs from "dayjs";

export default defineComponent({
  setup(props, context) {
    const state = reactive(new class {
      油品本日销量 = 0 as any;
      油品年度销售额 = 0 as any;
      油品年度销量 = 0 as any;
      油品本日销售额 = 0 as any;
      油品本日优惠额 = 0 as any;
      油品本日实收金额 = 0 as any;
      客单价 = 0 as any;
      油品订单数量 = 0 as any;
      便利店订单均价 = 0 as any;
      便利店收入 = 0 as any;
      日总收入 = 0 as any;
      list = [] as any;
      seq = 0;
      便利店单数 = 0 as any;
      地磅收入 = 0 as any;
      礼包券收入 = 0 as any;
    });


    async function getData(stationCode: number, searchDate: any) {
      const list = await getOilsSummaryData(dayjs(searchDate[0]).format('YYYY-MM-DD'), dayjs(searchDate[1]).format('YYYY-MM-DD'), stationCode, 0);
      if (list && list[0]) {
        state.油品本日销量 = list[0]['区间销售量(升)'] || 0;
        state.油品年度销售额 = list[0]['本年度油机金额(万元)'] || 0;
        state.油品年度销量 = list[0]['本年度销售量(吨)'] || 0;
        state.油品本日销售额 = list[0]['区间油机金额(万元)'] || 0;
        state.油品本日实收金额 = list[0]['区间实收金额(万元)'] || 0;
        state.油品本日优惠额 = list[0]['区间优惠金额(万元)'];
        state.客单价 = list[0]['客单价'] || 0;
        state.油品订单数量 = list[0]['油品订单数'] || 0;
        state.便利店订单均价 = list[0]['订单均价'] || 0;
        state.便利店收入 = list[0]['便利店(元)'] || 0;
        state.便利店单数 = list[0]['便利店单数'] || 0;
        state.日总收入 = list[0]['区间总收入(万元)'] || 0;
        state.地磅收入 = list[0]['地磅收入'] || 0;
        state.礼包券收入 = list[0]['礼包券'] || 0;
      }
    }

    return {
      state,
      getData
    }
  }
});
</script>

<style scoped>
.checkTags {
  color: #00d3e7;
  font-size: 0.8rem;
}

.checkTags div {
  height: 2rem;
  width: 4rem;
  line-height: 2rem;
  box-shadow: 0 2px 4px 0 rgb(20, 126, 171) inset, 0 0.5px 1px 0 rgb(20, 126, 171);

}

.revenue {
  width: 100%;
  height: 100%;
  position: absolute;
  color: white;
  /*border: 1px solid red;*/
}

.revenue-left {
  width: 32.3%;
  height: 100%;
  float: left;
  /*margin-left: 3rem;*/
  line-height: 1.8rem;
}

.revenue-left p {
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  margin-left: 3rem;
  /*margin-top: 0.1rem;*/
}

.revenue-center {
  width: 34.3%;
  height: 100%;
  float: left;
  padding-top: 1rem;
}

.revenue-center p {
  margin: 0;
  padding: 0;
  text-align: center;
  /*padding-right: 3.7rem;*/
}

.revenue-center p:nth-child(1) {
  /*padding-top: 0.8rem;*/
}

.revenue-right {
  width: 33.3%;
  height: 100%;
  float: left;
  line-height: 1.8rem;
  /*padding-left: 5rem;*/
}

.revenue-right p {
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  margin-left: 3rem;
}

.amount {
  color: rgb(255, 193, 37);
}

.revenue-center .amount {
  font-size: 2rem;
}

</style>
